<template>
    <!-- 查询当前用户类型 (s: 系统; A: 渠道代理; T: 商户; D: 门店) -->
    <!-- 编号 -->

    <div class="user-data__filter-item">
        <a-input v-model:value="deviceCode" allow-clear :placeholder="t('yl.eslDeviceCode')" />
    </div>
    <!-- 所属商户 -->
    <div class="user-data__filter-item" v-if="userType == 's' || userType == 'A'">
        <a-select
            v-model:value="PMerchantCode"
            style="width: 120px"
            :placeholder="t('yl.curMerchantName')"
            @change="handleSelect"
        >
            <a-select-option v-for="item in curMerchants" :key="item.merchantCode">
                {{ item.name }}
            </a-select-option>
        </a-select>
    </div>
    <!-- 使用门店 -->
    <div class="user-data__filter-item" v-if="userType == 's' || userType == 'A'">
        <a-select v-model:value="merchantCode" style="width: 120px" :placeholder="t('yl.merchantName')">
            <a-select-option v-for="item in selectMerchant" :key="item.merchantCode">
                {{ item.name }}
            </a-select-option>
        </a-select>
    </div>
    <!-- 所属门店 -->
    <div class="user-data__filter-item" v-if="userType == 'T'">
        <a-select v-model:value="merchantCode" style="width: 120px" :placeholder="t('yl.elsStore')">
            <a-select-option v-for="item in selectMerchant" :key="item.merchantCode">
                {{ item.name }}
            </a-select-option>
        </a-select>
    </div>
    <div class="user-data__filter-item">
        <a-select v-model:value="online" style="width: 120px" :placeholder="t('yl.status')">
            <a-select-option v-for="item in selectOptions" :key="item.value">
                {{ item.label }}
            </a-select-option>
        </a-select>
    </div>
    <div class="user-data__filter-item">
        <yl-search-reset
            :loading="loading"
            @submit="handleSubmit('handleSubmit')"
            @reset="handleSubmit('handleReset')"
        ></yl-search-reset>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, toRefs, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import ylSearchReset from '@/components/ylSeachReset.vue';
export default defineComponent({
    components: {
        ylSearchReset,
    },
    name: 'user-filter',
    props: {
        selectMerchant: {
            type: Array,
            default: () => [],
        },
        selectCurMerchant: {
            type: Array,
            default: () => [],
        },
        hideEnabled: {
            type: Boolean,
            default: () => true,
        },
    },
    emits: ['onSubmit', 'onReset', 'onSelect'],
    setup(props, { emit }) {
        const { t } = useI18n();
        const state = reactive({
            deviceCode: '',
            PMerchantCode: null,
            merchantCode: null,
            specsCode: null,
            online: null,
            curMerchants: computed(() => props.selectCurMerchant as NormalObj[]),
            Merchants: computed(() => props.selectMerchant as NormalObj[]),
            userType: localStorage.getItem('userType'),
        });

        const loading = ref<boolean>(false);
        // 筛选状态列表
        const selectOptions: any = [
            {
                label: t('yl.online'),
                value: 'true',
            },
            {
                label: t('yl.offline'),
                value: 'false',
            },
        ];

        //选择商户查找所有门店
        const handleSelect = async () => {
            emit('onSelect', state);
        };
        const handleSubmit = (type: string) => {
            if (type == 'handleReset') {
                state.deviceCode = '';
                state.PMerchantCode = null;
                state.merchantCode = null;
                state.specsCode = null;
                state.online = null;
            }
            let data = JSON.parse(JSON.stringify(state));
            delete data.curMerchants;
            delete data.Merchants;
            delete data.options;
            delete data.userType;
            emit('onSubmit', data);
        };

        return {
            ...toRefs(state),
            loading,
            handleSelect,
            handleSubmit,

            t,
            selectOptions,
        };
    },
});
</script>
<style lang="scss" scoped>
.user-data__filter-item {
    margin-right: $width20;
    &:last-child {
        margin-right: $width0;
    }
}
</style>
